<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>充电站管理</title>
	<link rel="stylesheet" href="../../../static/lib/plugins/bootstrap/css/bootstrap.min.css">
	<link rel="stylesheet" href="../../../static/lib/plugins/bootstrap-table/bootstrap-table.min.css">
	<link rel="stylesheet" href="../../../static/lib/plugins/bootstrap-datetimepicker/bootstrap-datetimepicker.min.css">
	<link rel="stylesheet" href="../../../static/lib/plugins/layer/layer.css">
	<link rel="stylesheet" href="../../../static/lib/plugins/bootstrap-validator/css/bootstrapValidator.min.css">
	<!-- 自定义公共样式 -->
	<link rel="stylesheet" href="../../../common/css/common.css">
	<script type="text/javascript" src="../../../static/lib/plugins/jQuery/jquery-2.2.3.min.js"></script>
	<script type="text/javascript" src="../../../static/lib/plugins/bootstrap/js/bootstrap.min.js"></script>
	<script type="text/javascript" src="../../../static/lib/plugins/bootstrap-table/bootstrap-table.min.js"></script>
	<script type="text/javascript" src="../../../static/lib/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>


	<script src="../../../static/lib/plugins/bootstrap-table/tableExport.js"></script>
	<script src="../../../static/lib/plugins/bootstrap-table/bootstrap-table-export.js"></script>





	<script type="text/javascript" src="../../../static/lib/plugins/bootstrap-datetimepicker/bootstrap-datetimepicker.min.js"></script>
	<script type="text/javascript" src="../../../static/lib/plugins/bootstrap-datetimepicker/locales/bootstrap-datetimepicker.zh-CN.js"></script>
	<script type="text/javascript" src="../../../static/lib/plugins/layer/layer.min.js"></script>
	<script type="text/javascript" src="../../../static/lib/plugins/bootstrap-validator/js/bootstrapValidator.min.js"></script>
	<script type="text/javascript" src="../../../static/lib/plugins/bootstrap-validator/js/language/zh_CN.js"></script>
	<script type="text/javascript" src="../../../static/lib/plugins/bootstrap-typeahead/bootstrap-typeahead.js"></script>
	<script type="text/javascript" src="../../../common/js/common.js"></script>
</head>
<body class="gray-bg">
<div class="panel-body" style="padding-bottom: 0px;">
	<div class="panel panel-default">
        <div class="panel-heading clearfix">
        	<!-- <span>查询条件</span> -->
			<button type="button" class="btn btn-primary  pull-right">修改</button>
			<button type="button" class="btn btn-primary mar-right pull-right" id="btnDelete">删除</button>
        	<button type="button" class="btn btn-primary mar-right pull-right" id="btnAdd">新增</button>
        </div>
        <div class="panel-body">
        	<div class="col-md-12 form-searchInput">
				<div class=" col-md-12 input-space clearfix bootstrapValidators">
					<div class="form-group col-md-4 col-sm-4 col-xs-4 ">
						<label class="label-width1">充电站名：</label>
						<input type="text" class="form-control" name="dcElectricPile">
					</div>
					<div class="form-group col-md-4 col-sm-4 col-xs-4">
						<label class="label-width1">站编码：</label>
						<input type="text" class="form-control" id="demo">
					</div>
					<div class="form-group col-md-4 col-sm-4 col-xs-4">
						<label class="label-width1">站位置：</label>
						<select  class="form-control" name="provinceNo" id="provinceNo">
							<option value="">--请选择--</option>
						</select>
					</div>
				</div>
				<div class="form-group col-md-12 input-space clearfix">
					<div class="col-md-4 col-sm-4 col-xs-4">											
						<label class="label-width1">站状态：</label>
						<select class="form-control" name="priYear" id="priYear" >
							
						</select>
					</div>
					<div class="col-md-4 col-sm-4 col-xs-4">											
						<label class="label-width1">开始日期：</label>
						<input type="text" class="form-control" id="startTime">
					</div>
					<div class="col-md-4 col-sm-4 col-xs-4">
						<label class="label-width1">结束日期：</label>
						<input type="text" class="form-control" id="endTime">
					</div>
				</div>
				<div class="form-group col-md-12 input-space clearfix">
					<div class="col-md-4 col-sm-4 col-xs-4">											
						<label class="label-width1">省级公司：</label>
						<select class="form-control" name="priYear" id="priYear" >
							<option value="">--请选择--</option>
							
						</select>
					</div>
					<div class="col-md-4 col-sm-4 col-xs-4">											
						<label class="label-width1">市级公司：</label>
						<select class="form-control" name="priYear" id="priYear" >
							<option value="">--请选择--</option>
							
						</select>
					</div>
					<div class="col-md-4 col-sm-4 col-xs-4">											
						<label class="label-width1">第三方：</label>
						<select class="form-control" name="priYear" id="priYear" >
							<option value="">--请选择--</option>
						</select>
					</div>
				</div>	
				<div class="form-group col-md-12 input-space clearfix">
					<div class="col-md-4 col-sm-4 col-xs-4"></div>
					<div class="col-md-4 col-sm-4 col-xs-4"></div>
					<div class="col-md-4 col-sm-4 col-xs-4">
	      				<button type="button" class="btn btn-primary pull-right">置空</button>
						<button type="button" class="btn btn-primary pull-right mar-right" id="openadd">查询</button>
					</div>
				</div>
			</div>
    	</div>
    	<div class="tab_list">
    		<table id="tb_ads"></table>
    	</div>
	</div>
</div>
<div class="layerText" style="display: none">
	<h1>layer测试</h1>
</div>
<script type="text/javascript">
	$(function() {
        formValidator();
		$('#tb_ads').bootstrapTable({
            method: 'GET',                      //请求方式（*）
            url: 'list.json',         //请求后台的URL（*）
            contentType: 'application/x-www-form-urlencoded',
            toolbar: '#toolbar',                //工具按钮用哪个容器
            striped: true,                      //是否显示行间隔色
            cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
            pagination: true,                   //是否显示分页（*）
            sortable: false,                     //是否启用排序
            sortOrder: "asc",                   //排序方式
            search:false,
            queryParams: queryParams,//传递参数（*）
            sidePagination: "server",           //分页方式：client客户端分页，server服务端分页（*）
            pageNumber: 1,                       //初始化加载第一页，默认第一页
            pageSize: 5,                       //每页的记录行数（*）
            pageList: [3, 10, 15],        //可供选择的每页的行数（*）
            strictSearch: true,
            clickToSelect: true,                //是否启用点击选中行
            uniqueId: "id",                     
            showColumns: true,                  //是否显示所有的列
            minimumCountColumns: 12,             //最少允许的列数
            singleSelect:true,

            showExport:true, // 导出按钮显示
            exportDataType:'basic', // 'basic', 'all', 'selected'.
            exportTypes:['excel'],//导出文件类型 ['json', 'xml', 'csv', 'txt', 'sql', 'excel']
            buttonsAlign:"right",  //按钮位置
            Icons:'glyphicon-export',
            exportOptions:{
                ignoreColumn: [0,1],  //忽略某一列的索引
                fileName: '总台帐报表',  //文件名称设置
                worksheetName: 'sheet1',  //表格工作区名称
                tableName: '总台帐报表',
                excelstyles: ['background-color', 'color', 'font-size', 'font-weight'],
                onMsoNumberFormat: DoOnMsoNumberFormat
            },




            columns: [
                {field: 'check', checkbox: true},
                {
                    field: '', title: '序号', align: 'center', formatter: function (value, row, index) {
                    	return index + 1;
                	}
                },
                {field: 'uuid', title: '主键', align: 'center', visible:false},
                {field: 'name', title: '站名', align: 'center'},
                {field: 'parentName', title: '站编码', align: 'center'},
                {field: 'createdat', title: '是否第三方', align: 'center'},
                {field: 'updatedat', title: '经度', align: 'center'},
                {field: 'updatedat', title: '纬度', align: 'center'},
                {field: 'updatedat', title: '站位置', align: 'center'},
                {field: 'updatedat', title: '战状态', align: 'center'},
                {field: 'updatedat', title: '省级公司', align: 'center'},
                {field: 'updatedat', title: '市级公司', align: 'center'},
                {field: 'updatedat', title: '投运时间', align: 'center'}
                ],
            	responseHandler: function (data) {
                	return {
                		total:data.totalNum,
                		rows:data.dataList
                	}
            	}
        });
	});

	function queryParams() {
        return {   //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
            pageNumber: this.pageNumber,   //页面大小
            pageSize: this.pageSize,  //页码
            // name: $("#navName").val(),
            //createdat: $("#startTime").val(),
            //updatedat: $("#endTime").val(),
        };
    };

    function DoOnMsoNumberFormat(cell, row, col) {
        console.log(cell); // 表格内容
        console.log(row); // 竖向记录条数
        console.log(col); // 横向记录td
        var result = "";
        if (row > 0 && col == 0)
            result = "\\@";
        console.log(result)
        return result;
    };



	// 删除
	$("#btnDelete").on("click",function(){
        var ids = getSelectedDeleteParams();
        debugger;
        if (ids != '' && ids != null) {
            layerAlert.successMessage(ids,'');
        } else {
            layerAlert.errorMessage("您的选择为空");
        }
	});

	$("#btnAdd").on("click",function () {
        formValidator();
        $(".bootstrapValidators").data('bootstrapValidator').destroy();
        $('.bootstrapValidators').data('bootstrapValidator', null);
    })
	//开始时间
    $('#startTime').datetimepicker({
        language:  'zh-CN',
        format: 'yyyy-mm-dd',
        weekStart: 1,
        autoclose: 1,
        todayBtn: 1,
        startView: 2,
        minView: 2,
        forceParse: 0,
        pickerPosition:'bottom-right',
    });
    //结束时间
     $('#endTime').datetimepicker({
        language:  'zh-CN',
        format: 'yyyy-mm-dd',
        weekStart: 1,
        autoclose: 1,
        todayBtn: 1,
        startView: 2,
        minView: 2,
        forceParse: 0,
        pickerPosition:'bottom-right',
    });

    $('#demo').typeahead({
        source: [
            { id: 1, full_name: 'Toronto', first_two_letters: 'To' },
            { id: 2, full_name: 'Montreal', first_two_letters: 'Mo' },
            { id: 3, full_name: 'New York', first_two_letters: 'Ne' },
            { id: 4, full_name: 'Buffalo', first_two_letters: 'Bu' },
            { id: 5, full_name: 'Boston', first_two_letters: 'Bo' },
            { id: 6, full_name: 'Columbus', first_two_letters: 'Co' },
            { id: 7, full_name: 'Dallas', first_two_letters: 'Da' },
            { id: 8, full_name: 'Vancouver', first_two_letters: 'Va' },
            { id: 9, full_name: 'Seattle', first_two_letters: 'Se' },
            { id: 10, full_name: 'Los Angeles', first_two_letters: 'Lo' }
        ],
        display: 'full_name',
        itemSelected: displayResult
    });


    $("#openadd").click(function() {
    	layer.open({
    		type: 1,
	        title: "桩查询详情",
	        shadeClose: true,
	        shade: 0.3,
            move :false,
            area: ['800px', '450px'],
	        skin: 'layui-layer-rims',
//	        offset: ['10px', ''],
	        content: $(".layerText"),
	        closeBtn:1,
		  	shadeClose:false,
		  	btn:['确定','关闭']
    	});
    });


    function formValidator(){
        $(".bootstrapValidators").bootstrapValidator({
            message: 'This value is not valid',
            feedbackIcons: {
                //valid: 'glyphicon glyphicon-ok',
                //invalid: 'glyphicon glyphicon-remove',
                //validating: 'glyphicon glyphicon-refresh'
            },
            fields:{
//                totalInvest:{
//                    validators:{
//                        numeric: {message: '总投资·万元只能输入数字'},
//                        callback:{
//                            message: '总投资不能是负数',
//                            callback: function check(value, validator,$field){
//                                if(value<0){
//                                    return false;
//                                }
//                                return true;
//                            }
//                        }
//                    },
//                },

                dcElectricPile:{
                    validators:{
                        numeric: {message: '直流桩数量只能输入数字'},
                        callback:{
                            message: '直流桩数量不能是负数',
                            callback: function check(value, validator,$field){
                                if(value<0){
                                    return false;
                                }
                                return true;
                            }
                        }
                    },
                },

            }
        });
    };
</script>
</body>
</html>